<template>
	<uni-popup ref="popupRef" type="bottom" @change="changeStatus" :safe-area="false">
		<scroll-view scroll-y class="fee_box">
			<view class="fee_container">
			<view class="fee_wrapper" v-show="orderData?.orderUnitPrice?.priceDetail?.length > 0">
				<view class="fee_detail_box" v-for="(item, index) in orderData?.orderUnitPrice?.priceDetail" :key="index">
					<view class="fee_title">
						<view class="fee_name">{{ item.date }}</view>
						<view class="fee_price">{{item.totalAmount}}元</view>
					</view>
					<view class="fee_service">
						<view class="fee_service_name">基础费</view>
						<view class="fee_service_price">{{Number(item.baseAmount || 0)}}元</view>
					</view>
					<view class="fee_service">
						<view class="fee_service_name">多宠加价</view>
						<view class="fee_service_price">{{Number(item.countAmount || 0)}}元</view>
					</view>
					<view class="fee_service" v-if="Number(item.extServiceAmount) > 0">
						<view class="fee_service_name">增值服务费</view>
						<view class="fee_service_price">{{Number(item.extServiceAmount || 0)}}元</view>
					</view>
				</view>
				<view class="fee_detail_box" v-for="(item, index) in orderData?.orderUnitPrice?.publicPriceDetail" :key="index">
					<view class="fee_title">
						<view class="fee_name">{{ item.name }}</view>
						<view class="fee_price">{{item.amount}}元</view>
					</view>
				</view>
				<!-- <view class="fee_discount">
					<view>订单改价</view>
					<view>-300.00元</view>
				</view> -->
			</view>
			</view>
		</scroll-view>
	</uni-popup>
</template>

<script setup>
	import { ref } from 'vue'
	
	const props = defineProps({
		orderData: {
			type: Object,
			default: {}
		}
	})
	const emits = defineEmits(['change'])
	
	const popupRef = ref()
	let popupState = false
	
	const open = () => {
		popupRef.value.open()
		popupState = true
	}
	const close = () => {
		popupRef.value.close()
		popupState = false
	}
	const changeStatus = (data) => {
		popupState = data.show
		emits('change', popupState)
	}
	const popupSwitch = () => {
		popupState == true ? popupRef.value.close() : popupRef.value.open()
		return popupState
	}
	
	defineExpose({ popupSwitch })
</script>

<style lang="scss" scoped>
	.fee_box {
		height: 75vh;
		background: #F9F6F6;
		border-radius: 24rpx;
		box-sizing: border-box;
		padding: 32rpx;
		padding-bottom: 120rpx;
		// padding-bottom: calc(144rpx + 32rpx + constant(safe-area-inset-bottom));
		// padding-bottom: calc(144rpx + 32rpx + env(safe-area-inset-bottom));
		.fee_container {
			display: flex;
		}
		.fee_wrapper {
			width: 100%;
			box-sizing: border-box;
			background: #FFFFFF;
			border-radius: 24rpx;
			padding: 40rpx 32rpx;
			margin-bottom: 40rpx;
			
			.fee_detail_box {
				padding-bottom: 40rpx;
				margin-bottom: 40rpx;
				border-bottom: 1rpx solid #E6E6E6;
				
				.fee_title {
					display:flex;
					justify-content: space-between;
					align-items: center;
					font-size: 30rpx;
					color: #1B2120;
					font-weight: bold;
					margin-bottom: 40rpx;
				}
				.fee_tips {
					font-size: 24rpx;
					color: #5C5E5E;
					margin-bottom: 24rpx;
				}
				.fee_service {
					display:flex;
					justify-content: space-between;
					align-items: center;
					font-size: 24rpx;
					color: #7C807F;
					margin-bottom: 24rpx;
				}
				.fee_service:last-child {
					margin-bottom: 0;
				}
			}
			
			.fee_detail_box:last-child {
				border-bottom: none;
				padding-bottom: 0;
				margin-bottom: 0;
			}
		
			.fee_discount {
				display:flex;
				justify-content: space-between;
				align-items: center;
				font-size: 30rpx;
				color: #1B2120;
				font-weight: bold;
			}
		}
	}
</style>